<script setup lang="ts">
import type { IamWorker } from './type'
import { useRoute } from 'vue-router'
import { enumStatus, statusOptions } from './type'
const route = useRoute()
const baseApi = '/iam-worker'

const { loadData, loading, model } = useDetail<IamWorker>(baseApi)

const handlePass = (id: string) => {
  ElMessageBox.confirm('确定通过吗？', '提示', {
    type: 'warning'
  }).then(() => {
    api.post(`${baseApi}/authenticationApprove`, { id, isAuthentication: 1 }).then(() => {
      ElMessage.success('通过成功')
      loadData()
    })
  })
}
const handleReject = (id: string) => {
  ElMessageBox.prompt('请输入拒绝原因', '提示', {
    type: 'warning'
  }).then(({ value }) => {
    if (!value) {
      ElMessage.error('请输入拒绝原因')
      return
    }
    api.post(`${baseApi}/authenticationApprove`, { id, isAuthentication: 2, approveReason: value }).then(() => {
      ElMessage.success('拒绝成功')
      loadData()
    })
  })
}
const handleOperation = (code: string, value?: string | string[]) => {
  switch (code) {
    case 'pass':
      handlePass(value as string)
      break
    case 'reject':
      handleReject(value as string)
      break
    default:
      throw new Error(`不存在的操作编码${code}!`)
  }
}

onMounted(() => {
  loadData(route.query.id as string)
})
</script>

<template>
  <el-empty v-if="!Object.keys(model).length" v-loading="loading" />
  <el-descriptions v-else v-loading="loading" label-width="100px" :column="3" border>
    <el-descriptions-item label="昵称" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.nickname }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="工种" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.eaWorkerWorkTypeList?.map(item => item.workTypeName).join(',') }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="头像" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        <el-image :src="model.avatarUrl" style="width: 50px; height: 50px" />
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="手机号" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.mobilePhone }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="性别" label-class-name="item-label" label-align="right">
      {{ model.gender || '未设置' }}
    </el-descriptions-item>

    <el-descriptions-item label="状态" label-class-name="item-label" label-align="right">
      <el-tag v-if="model.isAuthentication" :type="enumStatus?.[model.isAuthentication]?.color" effect="dark">
        {{ enumStatus?.[model.isAuthentication]?.label }}
      </el-tag>
    </el-descriptions-item>
    <el-descriptions-item v-if="model.idCardFront" label="身份证正面" label-class-name="item-label" label-align="right">
      <el-image :src="model.idCardFront" :preview-src-list="[model.idCardFront]" style="width: 50px; height: 50px" />
    </el-descriptions-item>
    <el-descriptions-item v-if="model.idCardBack" label="身份证背面" label-class-name="item-label" label-align="right">
      <el-image :src="model.idCardBack" :preview-src-list="[model.idCardBack]" style="width: 50px; height: 50px" />
    </el-descriptions-item>

    <el-descriptions-item label="身份证号码" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.idCard }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="姓名" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.realName }}
      </span>
    </el-descriptions-item>

    <el-descriptions-item label="邀请码" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.inviteCode }}
      </span>
    </el-descriptions-item>

    <el-descriptions-item label="账户金额" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.accountBalance }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="支付宝姓名" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.aliRealName }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="支付宝电话" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.aliPhone }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item label="支付宝账号" label-class-name="item-label" label-align="right">
      <span class="txt-short">
        {{ model.aliAccount }}
      </span>
    </el-descriptions-item>

    <el-descriptions-item
      v-for="item in model.skillsCertificateList"
      :key="item"
      :label="'技能证书' + item?.name"
      label-class-name="item-label"
      label-align="right"
    >
      <div class="skills">
        <el-image
          v-for="picture in item?.picture?.split(',')"
          :key="picture"
          :src="picture"
          :preview-src-list="[picture]"
          style="width: 50px; height: 50px"
        />
      </div>
    </el-descriptions-item>
  </el-descriptions>

  <div class="operation">
    <el-button v-if="model.isAuthentication === 3" type="primary" @click="handleOperation('pass', model.id)">
      通过
    </el-button>
    <el-button v-if="model.isAuthentication === 3" type="warning" @click="handleOperation('reject', model.id)">
      拒绝
    </el-button>
  </div>
</template>

<style scoped lang="scss">
.el-descriptions {
  :deep(.el-descriptions__header) {
    margin: 0 10px 12px;
  }

  :deep(.item-label) {
    width: 80px;
  }
}
.operation {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
</style>
